{% extends 'base.html' %} {% block link_for_script %}
<link rel="text/javascript" href="{{ url_for('static', filename='js/show.js', _external=True) }}"> {% endblock %} {% block link_for_style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css', _external=True) }}"> {% endblock %} {% block title %} Sai's Blog{% endblock %}

<!--This is the block body replace the base.html's block body.-->
{% block body %}

<div class="row posts">
    <!--Left sidebar-->
    <div class="col-sm-2 menus">
        <div class="weather-info">
        </div>
    </div>

    <!--Post articles-->
    <div class="col-sm-9 post">
        <!--Get the pagination object-->
        {% for post in posts.items %}
        <div class="card">

            <!--card title-->
            <div class="card-main-info">
                <div class="col-sm-12">
                    <div>
                        <a href="{{ url_for('blog.post', post_id=post.id) }}">
                            <h2 class="" style="border-left-style:groove; border-left-color:blueviolet;">
                                {{ post.title }}
                            </h2>
                        </a>
                    </div>

                    <div>
                        <p id="post-time{{loop.index}}">post time</p>
                    </div>
                </div>
            </div>
            <!--title end-->

            <!--card content-->
            <div class="">
                <!--left-->
                <div class="col-sm-3 display-inline">
                    <img src="../../static/images/boat.png" style="width:50%; height:50%;">
                </div>
                <!--right-->
                <div class="">
                    <!--content-->
                    <div class="col-sm-9">
                        <p class="" style="margin-left: 8px; margin-right: 8px; padding: 2px 2px 2px 2px; ">
                            {{ post.text | safe | striptags | truncate(100, True) }}
                        </p>

                        <hr>
                        <!--tool-->
                        <div class="">
                            <div class="tags">
                                <ul>
                                    {% for tag in post.tags %}
                                    <li style="display:inline-block"> <span class="label label-info">{{ tag.name }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <!--tool end-->
                    </div>
                    <!--content end-->


                </div>
                <!--right end-->
            </div>
            <!--card content end-->
        </div>
        <!--card end-->
        {% endfor %}

        <!--Footer nav-->
        {{ render_pagination(posts, 'blog.home') }}
    </div>
    <div class="col-sm-3-"></div>

</div>

{% endblock %}